<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <title>固本然全国产业布局图</title>
    <script
      type="text/javascript"
      src="https://registry.npmmirror.com/jquery/3.7.1/files/dist/jquery.min.js"
    ></script>
    <script
      type="text/javascript"
      src="https://registry.npmmirror.com/echarts/5.5.1/files/dist/echarts.min.js"
    ></script>
    <script src="./js/viewer.js"></script>

    <link rel="stylesheet" href="./css/viewer.css" />
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      #chart-panel {
        width: calc(100vw - 200px);
        height: calc(100vh - 200px);
        padding: 100px;
        margin: 0 auto;
      }

      @media screen and (max-width: 600px) {
        #chart-panel {
          padding: 0;
          padding-top: 40px;
          width: 100vw;
          height: 100vw;
          box-sizing: border-box;
        }
      }
    </style>

    <script type="text/javascript" src="./china.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="chart-panel"></div>

    <ul id="images" style="display: none">
      <li><img src="./images/tibet-1.jpg" alt="Picture 1" /></li>
      <li><img src="./images/1.jpg" alt="Picture 1" /></li>
      <li><img src="./images/1.png" alt="Picture 1" /></li>
      <li><img src="./images/2.jpg" alt="Picture 1" /></li>
    </ul>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("chart-panel"));
      // 指定图表的配置项和数据
      var option = {};

      //=============== start ===============//
      /**
       * 🚨🚨非常重要🚨🚨
       * 下面是 网站左侧代码，核心代码
       */
      const data = [
        { name: "青海", value: 3 },
        { name: "陕西", value: 9 },
        { name: "甘肃", value: 1 },
        { name: "湖北", value: 4 },
        { name: "河南", value: 1 },
        { name: "新疆", value: 4 },
        { name: "山西", value: 2 },
        { name: "宁夏", value: 14 },
        { name: "吉林", value: 1 },
        { name: "内蒙古", value: 1 },
      ];

      var geoCoordMap = {
        陕西: [108.948024, 34.263161],
        青海: [96.778916, 35.623178],
        甘肃: [103.823557, 36.058039],
        湖北: [113.298572, 30.684355],
        河南: [113.665412, 33.757975],
        新疆: [85.617733, 40.792818],
        山西: [111.849248, 36.857014],
        宁夏: [106.278179, 37.26637],
        吉林: [125.3245, 41.886841],
        内蒙古: [111.670801, 41.818311],
      };

      function convertData(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),
            });
          }
        }
        return res;
      }

      option = {
        title: {
          text: "固本然全国产业布局图",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          // showDelay: 0,
          // transitionDuration: 0.2,
        },
        // visualMap: {
        //   left: "right",
        //   min: 1,
        //   max: 15,
        //   inRange: {
        //     color: [
        //       "#abd9e9",
        //       "#e0f3f8",
        //       "#ffffbf",
        //       "#fee090",
        //       "#fdae61",
        //       "#f46d43",
        //     ],
        //   },
        //   text: ["High", "Low"],
        //   calculable: true,
        //   realtime: false,
        // },
        geo: {
          name: "图片数量",
          map: "china",
          roam: false,
          selectedMode: "single",
          // layoutCenter: ['100%', '100%'],
// 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
// layoutSize: 450,
          label: {
            normal: {
              show: true,
              textStyle: {
                color: "rgba(0,0,0,0.6)",
              },
            },
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 0.2)",
              areaColor: "#eee",
            },
            emphasis: {
              borderColor: "rgba(0, 255, 0, 1)",
              areaColor: "rgba(0, 255, 0, 1)",
              // shadowOffsetX: 0,
              // shadowOffsetY: 0,
              // shadowBlur: 20,
              // borderWidth: 0,
              // shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        series: [
          {
            type: "scatter",
            coordinateSystem: "geo",
            data: convertData(data),
            symbolSize: 20,
            symbol: `image://./flag.png`,
            symbolRotate: 0,
            symbolOffset: ["50%", "-100%"],
            tooltip: {
              show: false,
              trigger: "none",
            },
            label: {
              show: false,
            },
          },
          {
            name: "图片数量",
            type: "map",
            scaleSize: 1.2,
            geoIndex: 0,
            tooltip: {
              show: false,
            },
            data: data,
          },
        ],
      };
      //=============== end ===============//

      // 使用刚指定的配置项和数据显示图表。
      if (option && typeof option === "object") {
        myChart.setOption(option);
      }
      window.addEventListener("resize", myChart.resize);
      // 监听地图点击事件
      myChart.on("click", function (params) {
        if (params.componentType === "series" && params.seriesType === "map") {
          console.log("你点击了：" + params.name + "图片数量:" + params.value);
          if (params.value > 0) {
            previewImg();
          }else {
            setTimeout(function () {
              alert(params.name + '没有相关信息');
            },500)
          }
        }
      });

      function previewImg() {
        var viewer = new Viewer(document.getElementById("images"), {
          button: false, // 右上角关闭按钮
          title: false, // 标题
          toolbar: {
            oneToOne: true,
            oneToOne: "large",
            prev: "large",
            // prev: function () {
            //   viewer.prev(true);
            // },
            // play: true,
            next: "large",
            // next: function () {
            //   viewer.next(true);
            // },
          },

          hidden: function () {
            viewer.destroy();
          },
        });
        viewer.show();
      }
    </script>
  </body>
</html>
